<template>
  <ul>
    <li><span class="iconfont icon-shouye"></span> 
    <!-- 添加exact以后就可以实现首页 不默认变色 -->
      <router-link to="/" tag='li' exact-active-class='active'>首页</router-link>
    </li>
    <li><span class="iconfont icon-fenlei"></span>
      <router-link to="/kind" tag='li' exact-active-class='active' >分类</router-link>
    </li>
    <li><span class="iconfont icon-gouwuchekong"></span> 
      <router-link to="/goodscart" tag='li' exact-active-class='active' >购物车</router-link>
    </li>
    <li><span class="iconfont icon-31wode"></span> 
      <router-link to="/main" tag='li' exact-active-class='active' >我的</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      name: 'FooterBar'
    }
  },
 
}
</script>

<style scoped>
  .active{
    color: red;
  }
ul {
  height: 3.125rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

li span {
  font-size: 1.25rem;
}
</style>